@import (reference) "~weaver-mobile/dist/weaver-mobile.less";

@emailContact: email-contact;
@emailPersonCard: email-person-card;
@emailGroupSetting: email-group-setting;

.@{emailContact} {
  height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  background: @fill-body;
  .disabled {
    color: @color-text-disabled;
  }
  &-list-view {
    height: 100%;
    padding-bottom: @search-bar-height + @list-item-height + @button-height;
    box-sizing: border-box;
  }
  &-list {
    .wm-list-page-item-row-span-text-highlight {
      font-size: @font-size-base;
    }
  }
  &-group {
    display: inline-block;
    max-width: 100%;
    color: @color-text-paragraph;
    &-wrapper {
      border-bottom: @border-width-md solid @border-color-base;
      line-height: 0;
      background: @fill-base;
    }
    &-label {
      width: 100%;
      font-size: @font-size-base;
      line-height: 44 * @hd;
      padding-left: @h-spacing-lg;
      display: flex;
      box-sizing: border-box;
    }
    &-name {
      width: 100%;
      overflow: hidden;
      display: flex;
      .name {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
      }
      .count {
        flex-shrink: 0;
      }
    }
    &-icon {
      padding: 0 @h-spacing-sm;
      flex-shrink: 0;
      .am-icon {
        vertical-align: middle;
        width: 10 * @hd;
        color: @color-text-placeholder;
      }
    }
  }
  .wm-list-page-item-row {
    &-span {
      color: @color-text-placeholder;
      &-text-highlight {
        font-weight: normal;
        color: @color-text-paragraph;
      }
    }
  }
  &-all {
    display: flex;
    border-bottom: @border-width-md solid @border-color-base;
    &-choise {
      flex: 1 1;
    }
    &-cancel {
      color: @brand-primary;
      margin-right: @v-spacing-md;
    }
    &-select {
      flex-basis: auto;
      padding-right: @v-spacing-md;
    }
  }
  &-more, &-write, &-del {
    color: @color-text-base-inverse;
    // padding-left: @v-spacing-md;
    // padding-right: @v-spacing-md;
  }
  &-more {
    background: @color-text-placeholder;
  }
  &-write {
    background: @brand-primary;
  }
  &-del {
    background: @brand-error;
  }
  .email-nav-bar,
  .email-action-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.@{emailContact}-addContact {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 44 * @hd;
  background: @fill-body;
  &-content {
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .wm-form-item-wrap {
      background: @fill-base;
    }
    &-more-option {
      &-header {
        text-align: center;
        line-height: @list-item-height;
        border-top: @border-width-md solid @border-color-base;
        border-bottom: @border-width-md solid @border-color-base;
        background: @fill-base;
        span {
          padding-left: @h-spacing-md;
          padding-right: @h-spacing-sm;
          color: @color-text-paragraph;
        }
        .am-icon {
          color: @color-text-placeholder;
          vertical-align: middle;
        }
      }
    }
    &-label-choise {
      background: @fill-base;
      &-header {
        display: flex;
        line-height: @list-item-height;
        padding-left: @h-spacing-lg;
        border-top: @border-width-md solid @border-color-base;
        span {
          flex: 1 1;
          padding-left: @h-spacing-sm;
          color: @color-text-paragraph;
        }
        > div {
          flex-basis: auto;
          padding-right: @h-spacing-lg;
          .am-icon {
            color: @color-text-placeholder;
            vertical-align: middle;
            width: 18 * @hd;
            height: 18 * @hd;
          }
        }
      }
      &-body {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
        margin-top: 0;
        &-item {
          display: flex;
          line-height: 44 * @hd;
          margin-left: @h-spacing-lg;
          padding-right: @h-spacing-lg;
          border-bottom: @border-width-md solid @border-color-base;
          overflow: hidden;
          > span {
            flex: 1;
            margin-left: @h-spacing-sm;
            width: 100%;
            overflow-y: hidden;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
          }
          .am-checkbox-wrapper {
            flex-basis: auto;
            flex-shrink: 0;
          }
        }
      }
      &-footer {
        line-height: @list-item-height;
        text-align: right;
        border-bottom: @border-width-md solid @border-color-base;
        padding-right: @h-spacing-lg;
        color: @brand-primary;
      }
    }
  }
  .btn-group {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    line-height: 44 * @hd;
    .am-button {
      display: inline-block;
      flex: 1;
    }
    .hidden {
      display: none;
    }
  }
}

.@{emailPersonCard} {
  background: @fill-base;
  height: 100%;
  text-align: center;
  background: @fill-body;
  &-info {
    padding-top: 50 * @hd;
    padding-bottom: 30 * @hd;
    background: @fill-base;
    margin-bottom: @v-spacing-md;
    &-photo {
      padding-bottom: @v-spacing-sm;
      .am-avatar {
        width: 80 * @hd;
        height: 80 * @hd;
        font-size: 33 * @hd;
      }
    }
    &-name {
      color: @color-text-paragraph;
      padding-bottom: @v-spacing-xs;
      font-size: 17 * @hd;
    }
    &-address {
      color: @color-text-caption;
    }
  }
  &-action-list {
    &-item {
      display: flex;
      &-icon {
        flex: 0;
        padding-right: @h-spacing-lg;
        .am-icon {
          width: @icon-size-xs;
          height: @icon-size-xs;
          vertical-align: middle;
        }
      }
      &-label {
        flex: 1;
      }
    }
  }
  &-action {
    display: flex;
    &-item {
      flex: 1;
      text-align: center;
      &-icon {
        display: inline-block;
        border-radius: 100%;
        padding: @v-spacing-md;
        margin-bottom: @v-spacing-sm;
        width: 60 * @hd;
        height: 60 * @hd;
        box-sizing: border-box;
        border: @border-width-lg solid @border-color-base;
        line-height: (60 - (@v-spacing-md + @border-width-lg) * 2) * @hd;
        .am-icon {
          width: 22 * @hd;
          height: 22 * @hd;
          color: @brand-primary;
          vertical-align: middle;
        }
      }
    }
  }
}

.@{emailGroupSetting} {
  .btn-add {
    border: none;
    border-bottom: @border-width-md solid @border-color-base;
    color: @brand-primary;
    .am-icon {
      width: @icon-size-xxs;
      height: @icon-size-xxs;
    }
  }
}
